<template>
	<section>
		<!--列表v-loading="listLoading"-->
		<el-table border :data="tableDatas"   row-key="id"   v-loading="listLoading" @selection-change="handleSelectionChange"
				  highlight-current-row style="width: 100%;margin-bottom: 20px;">
			<!--多选框-->
			<!-- <el-table-column type="selection" width="55">
			</el-table-column> -->
			<!-- <el-table-column type="index" width="70" label="序号" fixed="left">
			</el-table-column> -->
			<el-table-column prop="typeName" label="名称" width="290" fixed="left">
			</el-table-column>
			<el-table-column prop="status" label="状态" width="100">
				<template slot-scope="scope">
					<el-tag :type="scope.row.status == '0' ? 'danger' : 'success'" effect="light" disable-transitions>
						{{ scope.row.status == '0' ? "不可用" : "可用" }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="realName" label="修改人" width="100">
			</el-table-column>
			<el-table-column prop="updateTime" label="修改时间" width="170" sortable>
			</el-table-column>
			<el-table-column  align="center" fixed="right">
				<template slot="header" scope="scope">
					<span >操作</span>&emsp;&emsp;
					<el-button type="primary" @click="addHandler">新增</el-button>
				</template>
				<template scope="scope">
					<el-button size="small" @click="edit(scope.row)">编辑</el-button>
					<el-button type="danger" size="small" @click="del(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!--工具条-->
		<!-- <el-col :span="24" class="toolbar">
			<el-button type="danger" :disabled="this.sels.length===0" @click="delBatch">批量删除</el-button>
			<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="page"
					:page-sizes="[5, 10, 50]"
					:page-size="rows"
					layout="total, sizes, prev, pager, next, jumper"
					:total="totalSize"
					style="float:right;">
			</el-pagination>
		</el-col> -->

		<!--新增界面-->
		<el-dialog :title="title" :visible.sync="addFormVisible" :close-on-click-modal="false">
			<el-form :model="addForm" label-width="80px" ref="addForm">
				<el-form-item label="文章类型" prop="typeName">
					<el-input v-model="addForm.typeName" auto-complete="off"></el-input>
				</el-form-item>

				<el-form-item label-width="100px" label="上级文章类型" prop="parentId">
					<el-cascader v-model="addForm.parentId" :options="articleTypes"
						:props="{ expandTrigger: 'hover', label: 'typeName', value: 'id', checkStrictly: true }"
						@change="handleChange" show-all-levels></el-cascader>
				</el-form-item>
				<el-form-item label="状态" prop="status">
					<!--状态(0:不可用;1:可用)-->
					<el-radio-group v-model="addForm.status">
						<el-radio :label="1">可用</el-radio>
						<el-radio :label="0">不可用</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit">提交</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
export default {
	data() {
		return {
			articleTypes:[],// 文章类型的集合
			row: "",
			sels: [], //存储多选记录
			addFormVisible: false,
			addForm: {
				id: '',
				typeName: '',
				parentId:'',
				status: '',
			},
			listLoading: false,
			//查询对象
			filters: {
				keyword: ''
			},
			totalSize: 0,//总记录条数
			page: 1,//当前页,要传递到后台的
			rows: 10, //每页显示多少条
			tableDatas: [], //当前页数据
		}
	},
	methods: {
			//获取列表数据
		getArticleTypeTree() {
			this.$http.post("/articleType/tree").then(result => {
				this.articleTypes = result.data.data;

			});
		},
		
		onEditorReady(editor) {
			//当富文本编辑框初始化好执行
			console.log('富文本编辑框初始化---------完成');
		},

		//表格多条数据选中事件
		handleSelectionChange(val) {
			/**
			 * val中存放的是所有已选择的行数据集合
			 */
			this.sels = [];
			if (val != null && val.length > 0) {
				for (var i = 0; i < val.length; i++) {
					//往sels数组中存值
					this.sels.push(val[i].id);
				}
			}
		},

		//提交新增表单数据
		addSubmit() {
			this.title = "新增用户";
			if (this.addForm.parentId) {
				this.addForm.parentId = this.addForm.parentId[this.addForm.parentId.length - 1];
			}

			
			if (!this.addForm.id) {
				this.$http.post("/articleType", this.addForm).then(result => {
					if (result.data.success) {
						this.$message({
							message: result.data.msg,
							type: 'success'
						});
						this.addFormVisible = false;
						this.getArticleTypeTree();
						this.getTableData();
					} else {
						this.$message({
							message: result.data.msg,
							type: 'error'
						});
					}
				});
			} else { 
				
				this.$http.put("/articleType/", this.addForm).then(result => {
					if (result.data.success) {
						this.$message({
							message: result.data.msg,
							type: 'success'
						});
						this.addFormVisible = false;
						this.getTableData();
					} else {
						this.$message({
							message: result.data.msg,
							type: 'error'
						});
					}
				});
			}
		},
		//点击编辑
		edit(row) {
			this.title = "修改"
			this.addFormVisible = true;//显示编辑框
			this.addForm = Object.assign({}, row);//对象赋值
			this.addForm.parentId= this.menuEcho(this.articleTypes, this.addForm.parentId)

		},
		//批量删除
		delBatch() {
			this.$confirm('确定删除这些数据吗？', '请确认', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				let param = {
					"ids": this.sels
				};
				console.log(param)
				this.$http.post("/articleType/deleteBatch", param).then(result => {
					if (result.data.success) {
						this.$message({
							type: 'success',
							message: result.data.msg
						});
						this.getTableData();
					} else {
						this.$message({
							type: 'error',
							message: result.data.msg
						});
					}
				});
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消操作'
				});
			});
		},

		//删除单条数据
		del(row) {

			this.$confirm('确定删除此条数据吗？', '请确认', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$http.delete("/articleType/" + row.id).then(result => {
					if (result.data.success) {
						this.$message({
							type: 'success',
							message: result.data.msg
						});
						this.getTableData();
						// 这里必须重新加载文章类型树,不然数中数据还是会出现
						this.getArticleTypeTree();
					} else {
						this.$message({
							type: 'error',
							message: result.data.msg
						});
					}
				});
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消操作'
				});
			});
		},
		addHandler() {
			this.addForm = {};
			this.addFormVisible = true;
			this.addForm.status = 1;
		},
		//选择第几页时触发
		handleCurrentChange(curentPage) {
			this.page = curentPage;
			this.getTableData();
		},
		//选择每页显示记录条数
		handleSizeChange(curentPage) {
			this.rows = curentPage
			this.getTableData();
		},
		handleChange(value) {
			console.log(this.addForm.courseTypeId);
		},
		//获取列表数据
		getTableData() {
			let para = {
				"currentPage": this.page,
				"pageSize": this.rows,
				"keyword": this.filters.keyword
			};
			this.listLoading = true; //显示加载圈
			// //分页查询
			// this.$http.post("/articleType/page", para).then(result => {
			// 	this.totalSize = result.data.data.total;
			// 	this.tableDatas = result.data.data.list;
			// 	this.listLoading = false;  //关闭加载圈
			// });
			this.$http.post("/articleType/tree").then(result => {
				this.tableDatas = result.data.data;
				this.listLoading = false;  //关闭加载圈
			});
		},
		menuEcho(list, id) {
			let arr = []; // 在递归时操作的数组
			let returnArr = []; // 存放结果的数组
			let depth = 0; // 定义全局层级
			// 定义递归函数
			function childrenEach(childrenData, depthN) {
				for (var j = 0; j < childrenData.length; j++) {
					depth = depthN; // 将执行的层级赋值 到 全局层级
					arr[depthN] = childrenData[j].id;
					if (childrenData[j].id == id) {
						returnArr = arr.slice(0, depthN + 1); //将目前匹配的数组，截断并保存到结果数组，
						break;
					} else {
						if (childrenData[j].children) {
							depth++;
							childrenEach(childrenData[j].children, depth);
						}
					}
				}
				return returnArr;
			}

			return childrenEach(list, depth);
		},
	},
	mounted() {
		this.getTableData();
		this.getArticleTypeTree()
	}
}

</script>

<style scoped></style>
